<template>
    <div class="app">
        <scroller class="scroller" append="tree" offset-accuracy="10" @scroll="scrollHandler">
            <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
                <text class="indicator-text">{{refreshTitle}}</text>
            </refresh>

            <div v-for="item in componentsList">
                <component :key="tiems" :content="item" :is="item.name" :pageNum="pageNum" />
            </div>
            <noData onDataTitle="请先设计模版" marginTop="200" v-if="componentsList.length ==0"></noData>
            <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">加载中...</text>
            </loading>
        </scroller>
        <div style="position: absolute;top:0;background-color: white;width: 750px;" v-if="headerType == true">
            <div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
            <div class="title_content">
                <div class="search_input_content" @click="searchClick">
                    <div class="icon_search">
                        <text class="icon">&#xe62f;</text>
                    </div>
                    <text style="font-size: 26px;line-height: 56px;color: rgba(42, 42, 54,0.3);">请输入商品名</text>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
const eeui = app.requireModule("eeui");
import { list as designerList } from "../../api/designer.js";
import { getMchInfo } from "../../api/amap";
import { scaner } from "../../api/scan.js";
import acrossAd from "./component/acrossAd/acrossAd.vue";
import phoneBill from "./component/phoneBill/phoneBill.vue";
import category_ten from "./component/category/category_ten.vue";
import category_eight from "./component/category/category_eight.vue";
import category_six from "./component/category/category_six.vue";
import category_five from "./component/category/category_five.vue";
import category_four from "./component/category/category_four.vue";
import category_three from "./component/category/category_three.vue";
import acrossService from "./component/acrossService/acrossService.vue";
import hotGoods from "./component/hotGoods/hotGoods.vue";
import xcxAd from "./component/xcxAd/xcxAd.vue";
import swipersChange from "./component/swipers/swipersChange.vue";
import swipers from "./component/swipers/swipers.vue";
import brand from "./component/brand/brand.vue";
import adBanner from "./component/adBanner/adBanner.vue";
import noData from "../../components/noData/noData.vue";
import products from "./component/products/products.vue";
import productsCoupons from "./component/productsCoupons/products.vue";
import productRow from "./component/products/productRow.vue";
import swipersCity from "./component/swipers/swipersCity.vue";
import groupCard from "./component/groupProduct/groupCard";
import swipersTranslate from "./component/swipers/swipersTranslate";
import countdowns from "./component/countDown/countDown";
import nearbyShops from "./component/nearbyShops/nearbyShops";
import transferActivities from "./component/transferActivities/transferActivities";
import shootingActivity from "./component/transferActivities/shootingActivity";
import transferFiltering from "./component/transferActivities/transferFiltering";
import spikeGroup from "./component/spike/group.vue";
import publicNavigation from "./component/publicNavigation/index.vue"
const storage = weex.requireModule("storage");
import { accessToken } from "../../api/user";

const umengPush = app.requireModule("eeui/umengPush");
export default {
    pageMessage: function (data) {
        //    let msg = data.message;
        //    if (msg.messageType == 'umengToken') {
        //      console.log('获取到友盟token：', msg.token); //推荐使用调用方法【umengPush.deviceToken()】获取token
        //    } else if (msg.messageType == 'notificationClick') {
        //      console.log('点击了通知栏消息：', msg);
        //      eeui.openPage({
        //            params: data,
        //            url: 'root://pages/member/message/index.js',
        //            statusBarType: 'immersion',
        //            statusBarStyle: false
        //          },
        //          (result) => {
        //
        //          }
        //      );
        //    }
    },
    name: "index",
    data() {
        return {
            componentsList: [],
            length: "",
            productPage: 20,
            isShow: true,
            pageId: 1,
            productList: [],
            loadinging: false,
            pageNum: 1,
            pageSize: 10,
            refreshing: false,
            startSwipers: false,
            secondSwipers: false,
            thirdSwipers: false,
            fourthSwipers: false,
            fifthSwipers: false,
            lastTime: 0,
            headerType: false,
            statusBarHeight: eeui.getStatusBarHeightPx(),
            imeiId: "",
            tiems: null,
            refreshTitle: "释放刷新页面...",
        };
    },
    created() {
        // 在实例创建完成后被立即调用
        this.loadDesigner(false);
        this.initIconFont();
        this.imeiId = this.getImei();
        this.accessTokenClick();
    },
    mounted() {},
    pageResume: function () {
        this.loadDesigner(false);
    },
    methods: {
        onpullingdown(event) {
            this.refreshTitle = "释放刷新页面...";
        },
        onrefresh(event) {
            this.refreshing = true;
            this.refreshTitle = "加载中...";
            setTimeout(() => {
                this.pageNum = 1;
                this.refreshing = false;
            }, 1000);
        },
        onloading(event) {
            this.loadinging = true;
            setTimeout(() => {
                this.loadinging = false;
                this.pageNum += 1;
            }, 1000);
        },
        accessTokenClick() {
            var _this = this;
            let globalData = _this.getGlobalData();
            if (globalData.token != null) {
                accessToken({
                    token: globalData.token,
                    imeiId: _this.imeiId,
                })
                    .then((res) => {
                        // console.log(res)
                        if (res.type == "success") {
                            globalData.token = res.data.token;
                            globalData.userInfo = res.data.userInfo;
                            _this.setGlobalData(globalData);
                            umengPush.addAlias(
                                res.data.userInfo.id,
                                "userId",
                                (result) => {}
                            );
                            _this.getMchInfoClick();
                        } else if (res.type == "logout") {
                            globalData.token = null;
                            _this.setGlobalData(globalData);
                            if (
                                _this.location == false &&
                                _this.APP_TYPE == 1
                            ) {
                                eeui.openPage(
                                    {
                                        url: "root://pages/index/amap.js",
                                        statusBarType: "immersion",
                                        statusBarStyle: false,
                                    },
                                    (result) => {}
                                );
                            }
                        }
                    })
                    .catch((error) => {
                        // console.log(error);
                        console.log("error=======");
                        globalData.token = null;
                        _this.setGlobalData(globalData);
                        if (_this.location == false && _this.APP_TYPE == 1) {
                            eeui.openPage(
                                {
                                    url: "root://pages/index/amap.js",
                                    statusBarType: "immersion",
                                    statusBarStyle: false,
                                },
                                (result) => {}
                            );
                        }
                    });
            } else {
                globalData.token = null;
                _this.setGlobalData(globalData);
                if (_this.location == false && _this.APP_TYPE == 1) {
                    eeui.openPage(
                        {
                            url: "root://pages/index/amap.js",
                            statusBarType: "immersion",
                            statusBarStyle: false,
                        },
                        (result) => {}
                    );
                }
            }
        },
        toOpenScaner() {
            var _this = this;
            eeui.openScaner({}, (res) => {
                switch (res.status) {
                    case "success":
                        scaner({
                            q: res.text,
                        })
                            .then((res) => {
                                if (res.type == "success") {
                                    eeui.confirm(
                                        {
                                            title: "温馨提示",
                                            message: res.content,
                                            buttons: ["取消", "确定"],
                                        },
                                        (result) => {
                                            if (
                                                result.status == "click" &&
                                                result.title == "确定"
                                            ) {
                                                if (!_this.isNull(res.data)) {
                                                    eeui.openPage({
                                                        pageType: "auto	",
                                                        url: res.data.url,
                                                        statusBarType:
                                                            "immersion",
                                                        statusBarStyle: false,
                                                    });
                                                }

                                                eeui.toast(res.content);
                                            }
                                        }
                                    );
                                }
                            })
                            .catch((error) => {
                                eeui.toast(error);
                            });
                        break;
                    case "error":
                        eeui.toast("识别失败");
                        break;
                }
            });
        },
        loadDesigner(forced) {
            // console.log("222222222")
            let time = new Date().getTime() - 60000 * 30;
            if (forced == false) {
                if (this.lastTime > 0) {
                    if (this.lastTime < time) {
                        return;
                    }
                }
            }
            this.lastTime = time;
            designerList({
                mchId: this.getGlobalData().mchId,
            }).then((res) => {
                this.length = res.data.length;
                this.componentsList = res.data;
                this.tiems = new Date().getTime();
            });
        },
        scrollHandler: function (e) {
            var _this = this;
            if (_this.headerType == false && e.contentOffset.y < -220) {
                _this.headerType = true;
            } else if (_this.headerType == true && e.contentOffset.y > -220) {
                _this.headerType = false;
            }
        },
        searchClick() {
            eeui.openPage(
                {
                    url: "root://pages/goods/search/index.js",
                    statusBarType: "immersion",
                    statusBarStyle: false,
                },
                (result) => {}
            );
        },
        getMchInfoClick() {
            var _this = this;
            if (this.APP_TYPE > 1) {
                getMchInfo()
                    .then((res) => {
                        if (res.data != null && res.data.sysMch != null) {
                            let globalData = this.getGlobalData();
                            globalData.mchId = res.data.sysMch.id;
                            globalData.mchName = res.data.sysMch.name;
                            _this.location = res.data.locked;
                            if (res.data.shop != null) {
                                globalData.shopId = res.data.shop.id;
                                globalData.shopName = res.data.shop.name;
                            }
                        }
                    })
                    .catch((error) => {
                        // console.log(error)
                    });
            }
        },
    },
    components: {
        adBanner,
        acrossAd,
        acrossService,
        hotGoods,
        category_ten,
        category_eight,
        category_six,
        category_five,
        category_three,
        category_four,
        xcxAd,
        swipersChange,
        swipers,
        noData,
        products,
        productsCoupons,
        brand,
        productRow,
        phoneBill,
        swipersCity,
        groupCard,
        swipersTranslate,
        countdowns,
        nearbyShops,
        transferActivities,
        shootingActivity,
        transferFiltering,
        spikeGroup,
        publicNavigation
    },
};
</script>

<style scoped>
.app {
    flex: 1;
    background-color: rgb(248, 248, 248);
}

.openScaner-text {
    font-size: 25px;
}

.title_content {
    height: 100px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.openScaner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    width: 150px;
    height: 60px;
    border-radius: 50px;
    margin-left: 5px;
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(0, 0, 0, 0.3);
    border-style: solid;
    border-width: 1px;
}

.content {
    width: 170px;
    position: fixed;
    right: 5px;
}

.refresh {
    /*margin-top: 20px;*/
    /*height: 60px;*/
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.title2 {
    font-size: 35px;
    font-family: iconfont2;

    color: rgba(26, 26, 30, 1);
    opacity: 0.5;
}

.loading {
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.loadingBox {
    height: 40px;
    width: 40px;
}

.scroller {
    width: 750px;
    flex: 1;
}

.navbarc {
    width: 750px;
    height: 100px;
    margin-bottom: 50px;
    background-color: white;
}

.text {
    font-size: 26px;
}

.status-bar {
    height: 100px;
    background-color: white;
}

.search_input_content {
    width: 500px;
    height: 58px;
    opacity: 0.95;
    border-radius: 50px;
    margin-left: 30px;
    flex-direction: row;
    align-items: center;
    background-color: white;
    overflow: hidden;
    border-style: solid;
    border-color: rgba(212, 215, 220, 1);
    border-width: 1px;
}

.icon_search {
    margin-left: 20px;
}

.icon {
    font-family: iconfont2;
    color: rgba(42, 42, 54, 1);
    opacity: 0.3;
    font-size: 26px;
    margin-right: 10px;
}
.indicator-text {
    color: #888888;
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
}
</style>
